<!--
* @FileDescription: 功能管理弹框组件
* @Author: yuec621@outlook.com
* @Date: 2024-12-30 12:33:06
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-12-30 12:33:10
-->
<template>
    <div class="toolSelBox">
        <div class="toolTitle">
            <span>曲线常用设置</span>
            <svg-icon class="hover" @click="closeClick" icon-class="tubiaoneiguanbi" />
        </div>
        <p class="selTip">
            <svg-icon style="fill: rgba(68, 136, 255, 1);margin-right: 8px;" icon-class="tishitianchong" />可长按功能项拖动顺序
        </p>
        <div class="toolList">
            <el-row :gutter="23">
                <el-col :span="12">
                    <div class="toolLeft" ref="toolLeft">
                        <h2>常显功能</h2>
                        <p class="toolLeftBox" :class="state.selType == item.type?'active':''"
                            v-for="(item,index) in toolListnew" :key="index" @click="acSelClick(item)">
                            <span>
                                <svg-icon class="iconBox" :icon-class="item.icon" />
                                {{ item.name }}
                            </span>
                            <svg-icon icon-class="shanchu-tianchong" />
                        </p>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="toolLeft">
                        <h2>收起功能</h2>
                        <p :class="state.selType == item.type?'active':''" v-for="item in state.acSelList"
                            @click="removeSelClick(item)">
                            <span>
                                <svg-icon class="iconBox" :icon-class="item.icon" />
                                {{ item.name }}
                            </span>
                            <svg-icon icon-class="xinzeng-tianchong" />
                        </p>
                    </div>
                </el-col>
                <div class="form_footer" style="display: flex;justify-content: space-between;">
                    <el-button type="info" @click="resetClick">重置</el-button>
                    <span>
                        <el-button type="info" @click="closeClick">取消</el-button>
                        <el-button type="primary" @click="submitSel">确定</el-button>
                    </span>
                </div>
            </el-row>
        </div>
    </div>
</template>
<script setup>
    import {
        computed,
        nextTick,
        onMounted,
        reactive,
        watchEffect
    } from 'vue';
    import axios from "@/utils/request"
    import {
        searchchannelNoList
    } from '@/api/config'
    import useUserStore from "@/store/modules/user";
    import dayjs from 'dayjs';
    import _ from 'lodash'
    import Sortable from 'sortablejs'
    const {
        proxy
    } = getCurrentInstance();
    const calendar = ref(null)
    const toolLeft = ref(null)
    const userStore = useUserStore();
    const emits = defineEmits([''])
    const props = defineProps({
        toolList: {
            type: Array,
            default: () => {
                return [{
                    name: '今',
                    icon: 'jintian',
                    type: 0,
                    selname: '取消今日',
                    show: true
                }, {
                    name: '前一天',
                    icon: 'qianyitian',
                    type: 1,
                    selname: '取消前一天',
                    show: true
                }, {
                    name: '后一天',
                    icon: 'houyitian',
                    type: 2,
                    selname: '取消后一天',
                    show: true
                }, {
                    name: '事件日历',
                    icon: 'rilishijian',
                    type: 3,
                    selname: '取消事件日历',
                    show: true
                }, {
                    name: '显示圆点',
                    icon: 'yuandian',
                    type: 4,
                    selname: '取消显示圆点',
                    show: true
                }, {
                    name: '标尺',
                    icon: 'biaochi',
                    type: 5,
                    selname: '取消标尺',
                    show: true
                }, {
                    name: '游标',
                    icon: 'youbiao',
                    type: 6,
                    selname: '取消游标',
                    show: true
                }, {
                    name: '框选',
                    icon: 'kuangxuan',
                    type: 7,
                    selname: '取消框选',
                    show: true
                }, {
                    name: '前一条',
                    icon: 'qianyitiao',
                    type: 8,
                    selname: '取消前一条',
                    show: true
                }, {
                    name: '后一条',
                    icon: 'houyitiao',
                    type: 9,
                    selname: '取消后一条',
                    show: true
                }, {
                    name: '纵向放大',
                    icon: 'zongxiangfangda',
                    type: 10,
                    selname: '取消纵向放大',
                    show: true
                }]
            }
        }
    })
    // 重点
    const state = reactive({
        acSelList: [{
            name: '续传数据',
            icon: 'xuchuanshuju',
            type: 11,
            selname: '取消续传数据',
            show: false
        }, {
            name: '截图',
            icon: 'jietu',
            type: 12,
            selname: '取消截图',
            show: false
        }, {
            name: '打印',
            icon: 'dayin',
            type: 13,
            selname: '取消打印',
            show: false
        }],
        toolSelShow: false,
        selType: undefined
    })
    const toolListnew = ref(props.toolList)

    function acSelClick(item) {
        item.show = false
        state.selType = item.type
        state.acSelList.push(item)
        toolListnew.value = _.pullAllWith(toolListnew.value, [item], _.isEqual);
    }

    function removeSelClick(item) {
        item.show = true
        toolListnew.value.push(item)
        state.selType = item.type
        state.acSelList = _.pullAllWith(state.acSelList, [item], _.isEqual);
    }

    function closeClick() {
        emits('toolSelShowClick', false, toolListnew.value)
    }

    function resetClick() {
        toolListnew.value = [{
            name: '今',
            icon: 'jintian',
            type: 0,
            selname: '取消今日',
            show: true
        }, {
            name: '前一天',
            icon: 'qianyitian',
            type: 1,
            selname: '取消前一天',
            show: true
        }, {
            name: '后一天',
            icon: 'houyitian',
            type: 2,
            selname: '取消后一天',
            show: true
        }, {
            name: '事件日历',
            icon: 'rilishijian',
            type: 3,
            selname: '取消事件日历',
            show: true
        }, {
            name: '显示圆点',
            icon: 'yuandian',
            type: 4,
            selname: '取消显示圆点',
            show: true
        }, {
            name: '标尺',
            icon: 'biaochi',
            type: 5,
            selname: '取消标尺',
            show: true
        }, {
            name: '游标',
            icon: 'youbiao',
            type: 6,
            selname: '取消游标',
            show: true
        }, {
            name: '框选',
            icon: 'kuangxuan',
            type: 7,
            selname: '取消框选',
            show: true
        }, {
            name: '前一条',
            icon: 'qianyitiao',
            type: 8,
            selname: '取消前一条',
            show: true
        }, {
            name: '后一条',
            icon: 'houyitiao',
            type: 9,
            selname: '取消后一条',
            show: true
        }, {
            name: '纵向放大',
            icon: 'zongxiangfangda',
            type: 10,
            selname: '取消纵向放大',
            show: true
        }]
        state.acSelList = [{
            name: '续传数据',
            icon: 'xuchuanshuju',
            type: 11,
            selname: '取消续传数据',
            show: false
        }, {
            name: '截图',
            icon: 'jietu1',
            type: 12,
            selname: '取消截图',
            show: false
        }, {
            name: '打印',
            icon: 'dayin',
            type: 13,
            selname: '取消打印',
            show: false
        }]
    }

    function submitSel() {
        emits('toolSelShowClick', false, toolListnew.value)
    }
    onMounted(() => {
        let ops = {
            draggable: ".toolLeftBox", //被拖拽的元素的class,要拖拽的目标
            group: {
                name: "templateList",
                pull: false,
                put: false,
            },
            handle: ".toolLeftBox", //被拖拽的元素的class
        }
        Sortable.create(toolLeft.value, ops)
    })
</script>
<style lang="scss" scoped>
    .toolSelBox {
        border-radius: 8px 8px 0px 0px;
        max-width: 370px;
        min-width: 370px;
        background-color: #fff;

        .toolTitle {
            border-radius: 8px 8px 0px 0px;
            background: linear-gradient(90deg, rgba(68, 136, 255, 0.6) 0%, rgba(68, 136, 255, 0.3) 100%);
            font-size: 18px;
            color: rgba(62, 70, 79, 1);
            font-weight: 800;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 16px;
        }

        .selTip {
            border-radius: 4px;
            background: rgba(68, 136, 255, 0.12);
            border: 1px solid rgba(68, 136, 255, 0.2);
            color: rgba(62, 70, 79, 1);
            display: flex;
            align-items: center;
            padding: 6px;
            margin: 16px;
            font-size: 14px;
        }

        .toolList {
            margin: 0 10px;

            .toolLeft {
                font-size: 14px;

                .iconBox {
                    margin-right: 6px;
                }

                h2 {
                    padding: 0;
                    margin: 0;
                    font-size: 16px;
                    font-weight: 700;
                }

                p {
                    margin: 0;
                    display: flex;
                    justify-content: space-between;
                    padding: 6px 6px;
                    border-radius: 4px;
                    cursor: pointer;

                    &.active {
                        background-color: rgba(91, 109, 128, 0.08);
                    }
                }
            }
        }
    }
</style>